﻿
<style>
    *{
        margin: 0;
        padding:0;
    }
    .clearfix:after{
        display: table;
        content: "";
        clear: both;
    }
    .bot,.psd,.login2{
        font-size: 12px;
        color:rgb(105, 105, 105);
    }
    .bot a{
        color:rgb(105, 105, 105);
    }
    .pic1{
        float: left;
    }
    h2{
        height:60px;
        line-height: 60px;
        float: left;
        font-weight: normal;
        margin-left:20px;
        color:rgb(85, 85, 85); 
    }
    .p{
        background: #e93854;
    }
    .pic2{
        margin-left: 160px;
    }
    .box{
        position: fixed;
        top:140px;
        right:160px;
        width:340px;
        background: white;
    }
    .clearfix{
        margin-bottom:10px; 
    }
    h3{
        float: left;
        margin-left:18px; 
        font-weight: normal;     
    }
    .title{
        margin:18px 180px;
    }
    .login{
        float: right;
    }
    .input1{
        width: 260px;
        height: 40px;
        margin:10px 0;
        padding-left: 10px;
    }
    .pic3{
        vertical-align: middle;
        border:1px solid rgb(179, 178, 178);
        border-right: none;
    }
    .form{
        margin-left:20px; 
    }
    .input2{
        width: 300px;
        height: 38px;
        background: rgb(221, 3, 3);
        color:white;
        border:none;
        outline:none;
        cursor:pointer;
    }
    .input3{
        float: left;
        margin-top:2px;
    }
    .psd{
        float: right;
    }
    a{
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
        color:orange;
    }
    .text1{
        text-align: center;
        margin:10px;
    }
    .bot{
        margin-top:20px;
    }
    .text1 a{
        margin:10px;
    }
    .box2{
        width:320px;
        padding-top:20px; 
        padding-bottom: 20px;       
    }
    .auto{
        margin:10px 0;
    }
    .login a{
        font-size: 14px;
        color:#e93854;
    }
    .pic4{
        vertical-align: middle;
    }
    
</style>

<div class="title clearfix">
    <a href="#"><img src="image/logo.png" class="pic1"/></a><h2>欢迎登录</h2>
</div>
<div class="p"><img src="image/banner.png" class="pic2"/></div>


<div class="box">
    <div class="box2"> 
        <div class="clearfix">
            <h3>京东会员</h3>
            <div class="login">
                <img src="image/icon5.jpg" class="pic4"/>
                <a href="#">立即注册</a>
            </div>          
        </div>
        
        <div class="form">
            <img src="image/icon1.jpg" class="pic3"/><input placeholder="邮箱/用户名/已验证手机" class="input1"/><br/>
            <img src="image/icon2.jpg" class="pic3"/><input type="password" class="input1"/><br/>
            
            <div class="auto clearfix">
                <input type="checkbox" class="input3"/><span class="login2">自动登录</span>
                <a href="#" class="psd">忘记密码?</a>
            </div>
            <input type="submit" class="input2" value="登 录"/>
        </div>  
    </div> 
</div>

<div class="bot">
        <div class="text1"><a href="#">关于我们</a>| <a href="#">联系我们</a>| <a href="#">人才招聘</a>| <a href="#">商家入驻</a>| <a href="#">广告服务</a>| <a href="#">手机京东</a>| <a href="#">友情链接</a>| <a href="#">销售联盟</a>| <a href="#">京东社区</a>| <a href="#">京东公益</a>| <a href="#">English Site</a></div>
        <div class="text1">Copyright?2004-2017 京东JD.com 版权所有</div>
</div>
